<template>
  <el-container>
    <el-header
      style="
      display: flex;
      justify-content: center;
      align-items: center;
        height: 350px;
        padding: 0;
        background-image: url('https://img.neptech.net/i/2025/06/17/i84gsx.webp');
        background-position: center;
        background-size: cover;
      "
    ><h1 style="font-size: 40px;color: white;">Woniu CTF 考试系统</h1>
    </el-header>
    <el-container>
      <el-aside> </el-aside>
      <el-main>
        <el-tabs
          v-model="activeTab"
          type="border-card"
          @tab-change="handleTabChange"
        >
          <el-tab-pane label="考试大厅"></el-tab-pane>
          <el-tab-pane label="进入考场"></el-tab-pane>
          <el-tab-pane label="排行榜"></el-tab-pane>
          <RouterView/>
          <template>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000"
            />
          </template>
        </el-tabs>
      </el-main>
      <el-aside> </el-aside>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">

const router = useRouter();

// 默认选中第一个标签页
const activeTab = ref(0);
const handleTabChange = (tabIndex: number) => {
  const routes = ["/contest/list", "/contest/ongoing","/contest/end"];
  router.push(`${routes[tabIndex]}`);
};
</script>

<style scoped></style>
